import "./Connect.scss"
import TrackVisibility from 'react-on-screen';

export interface Msg {
  title: string;
  value: string;
}

const Connect = memo(() => {
  const msgArr: Msg[] = [
    {
      title: "Email",
      value: "1730821420@qq.com"
    },
    {
      title: "QQ",
      value: "1730821420"
    },
    {
      title: "WeChat",
      value: "abc123mzz"
    },
  ]
  return (
    <section className="connect-com" id="connect">
      <div className="container">
        <img className="contact-img" src="/src/assets/img/contact-img.svg" alt="img load error" />
        <div className="msg-box">
          <div className="title">Get In Touch</div>
          <div className="show-msg">
            <TrackVisibility once>
              {({ isVisible }) =>
              (
                msgArr.map((v, i) => (
                  <p key={i} className={isVisible ? "active" : ""}>{v.title}: <span>{v.value}</span></p>
                ))
              )
              }
            </TrackVisibility>
          </div>
        </div>
      </div>
    </section>
  )
})

export default Connect
